<script lang="ts" setup>
import PlayListIntroduction from '@components/common/PlaylistIntroduction/index.vue'
import {onMounted, reactive} from 'vue'
import {
  requestBanner,
  requestRecommenSongList,
  requestExclusiveBroadcast,
  requestNewSongs,
  requestGetSoundSource
} from '../../utils/axiosURL';
import indexJSON from './index.json'
import useSongURLStore from '../../store/songURL'
import { storeToRefs } from "pinia";
import defaultImg from "../../assets/logo.png";

const { songName, playStates } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()
// 轮播图数据
const bannerData = reactive([])
// 推荐歌单数据
const recommenSongList = reactive<any>([])
// 存储独家播放数据
const savaExclusiveBroadcast = reactive<any>([])
// 新音乐数据
const savaLatestSongData = reactive<any>([])

// 轮播图请求
const getBannerFn = () => {
  requestBanner().then((data: any) => {
    bannerData.values = data.banners
  }).catch(_ => { })
}

// 首页推荐歌单的其余九项歌单
const RecommenSongList = () => {
  requestRecommenSongList(9).then((data: any) => {
    recommenSongList.values = data.result
  }).catch(_ => { })
}

// 独家放送请求
const requestExclusiveBroadcastFn = () => {
  requestExclusiveBroadcast().then((data: any) => {
    savaExclusiveBroadcast.values = data.result
  }).catch(err => {
    console.log(err)
  })
}

// 新音乐请求
const requestNewSongsFn = () => {
  requestNewSongs().then((data: any) => {
    savaLatestSongData.values = data.result
  }).catch(err => {
    console.log(err)
  })
}

// 双击击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}

// 点击播放图片播放音乐
const playNewSongFn = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};

onMounted(() => {
  getBannerFn()
  RecommenSongList()
  requestExclusiveBroadcastFn()
  requestNewSongsFn()
})
</script>


<template>
  <div class="personalityRecommon">
    <!-- 轮播图部分 -->
    <div class="bannerWrap">
      <el-carousel :interval="4000000" type="card" height="200px">
        <el-carousel-item v-for="item in (bannerData.values)">
          <img :src="`${item.imageUrl}`" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 推荐歌单部分 -->
    <div class="recommenSongList">
      <p class="recommenSongList_title">
        <span>{{ indexJSON.recommenSongList }}</span>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </p>
      <div v-if="recommenSongList.values.length !== 0" class="everydayRecommen">
        <div class="songItem">
          <router-link to="/DailySongRecom">
            <div class="imgWrap">
              <img class="itemBkImg" src="../../assets/GaussianBlur.jpg" alt="" />
              <img class="calendarImg" src="../../assets/calendar.png" alt="">
              <div class="getDate">{{
                new Date().getDate() <= 9 ? '0' + new Date().getDate() : new Date().getDate() }}</div>
                  <div class="topInfomation">{{ indexJSON.dailyUpdate }}</div>
                  <div class="playBtn">
                    <img src="../../assets/playimg.png" alt="">
                  </div>
              </div>
          </router-link>
          <p class="songListDesc">{{ indexJSON.dailyRecommenSong }}</p>
        </div>
        <PlayListIntroduction v-for="item in recommenSongList.values" :picUrl="`${item.picUrl}`" :name="`${item.name}`"
          :playcount="`${item.playCount}`" :id="`${item.id}`" />
      </div>
      <div v-else class="everydayRecommen">
        <playListIntroduceSkeleton v-for="item in 10" />
      </div>
    </div>

    <!-- 独家放送 -->
    <div class="exclusiveBroadcast">
      <p class="exclusiveBroadcast_title">
        <span>{{ indexJSON.exclusiveBroadcast }}</span>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </p>
      <div class="exclusiveBroadcastWrap">
        <div class="exclusiveBroadcastItem" v-for="item in savaExclusiveBroadcast.values"
          v-if="savaExclusiveBroadcast.values.length !== 0">
          <RouterLink :to="`/MVDetail/${item.id}`">
            <div class="exclusiveBroadcastItemImgWrap">
              <img :src="`${item.picUrl}`" alt="">
            </div>
            <p class="copyWrite" :title="`${item.name}`">{{ item.name }}</p>
          </RouterLink>
        </div>
        <ExclusiveBroadcastSkeleton v-else v-for="item in 3" />
      </div>
    </div>

    <!-- 最新音乐 -->
    <div class="latestSong">
      <p class="exclusiveBroadcast_title">
        <span>{{ indexJSON.latestSong }}</span>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </p>
      <div class="latestSongList">
        <div class="latestSongItem" v-for="(item, index) in savaLatestSongData.values"
          v-if="savaLatestSongData.values.length !== 0">
          <div class="picture"
            @click="playNewSongFn(item.id, item.name, item.song.artists[0].name, item.picUrl, item.song.duration, index)">
            <img v-lazy="item.picUrl" alt="">
            <div class="smallImg">
              <img src="../../assets/playimg.png" alt="">
            </div>
          </div>
          <div class="descWrap"
            @dblclick="clickSongPlay(item.id, item.name, item.song.artists[0].name, item.picUrl, item.song.duration, index)">
            <p class="newSongTitle" :title="item.name">{{ item.name }}</p>
            <div class="newSongAuthor" :title="item.song.artists[0].name">
              <div class="moreLabel" ref="moreLabel">
                <button v-if="item.song.hrMusic">Hi-Res</button>
                <RouterLink :to="`/MVDetail/${item.song.mvid}`">
                  <button class="mv" v-if="item.song.mvid">MV</button>
                </RouterLink>
                <button v-if="item.song.sqMusic">SQ</button>
              </div>
              <p>{{ item.song.artists[0].name }}</p>
            </div>
          </div>
        </div>
        <NewMusicItemSkeleton v-else v-for="item in 12" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.personalityRecommon {
  width: 100%;
  height: calc(100% - 110px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;

  // 轮播图部分
  .bannerWrap {
    width: $width-40;
    height: 250px;

    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 推荐歌单部分
  .recommenSongList {
    width: $width-40;

    // 标题
    .recommenSongList_title {
      span {
        margin-right: $marginRight6;
        font-family: $activeTextFont;
      }

      &:nth-child(1) {
        @extend .moduleTitle
      }
    }

    // 歌单
    .everydayRecommen {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      width: 100%;
      margin-top: 10px;

      // 歌单的每一项
      .songItem {
        position: relative;
        width: 18%;
        margin-right: 15px;

        .imgWrap {
          position: relative;
          overflow: hidden;

          .itemBkImg {
            width: 100%;
            height: 140px;
            max-height: 211px;
            border-radius: $borderRadius8;
          }

          .calendarImg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 95px;
            height: 92px;
            text-align: center;
          }

          .getDate {
            position: absolute;
            top: calc(50% - 15px);
            left: calc(50% - 23px);
            color: $font_hover_color;
            font-family: $activeTextFont;
            font-size: 44px;
          }

          .topInfomation {
            position: absolute;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.489);
            border-radius: $borderRadius8 $borderRadius8 0 0;
            font-size: $font-size-sm;
            padding: 4px;
            box-sizing: border-box;
            color: $font_default_color ;
            font-family: $textFont;
            transform: translateY(-100%);
            transition: .4s;
          }

          .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: 1s;

            img {
              position: absolute;
              top: 1px;
              right: 0;
              bottom: 0;
              left: 3px;
              margin: auto;
              width: 24px;
              height: 24px;
            }
          }

          &:hover .topInfomation {
            transform: translateY(0%);
          }

          &:hover .playBtn {
            opacity: 1;
          }
        }

        .songListDesc {
          font-family: $textFont;
          font-size: $font-size-sm;
          line-height: 20px;
        }
      }
    }
  }

  // 独家放送
  .exclusiveBroadcast {
    width: 100%;
    margin-top: 20px;

    .exclusiveBroadcast_title {
      span {
        margin-right: $marginRight6;
        font-family: $activeTextFont;
      }

      &:nth-child(1) {
        @extend .moduleTitle
      }
    }

    .exclusiveBroadcastWrap {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 200px;
      margin-top: 10px;
      padding-right: 50px;
      box-sizing: border-box;

      .exclusiveBroadcastItem {
        width: 32%;
        height: 100%;

        .exclusiveBroadcastItemImgWrap {
          width: 100%;
          height: calc(100% - 24px);

          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }

        .copyWrite {
          width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 24px;
          font-size: $font-size-xs;
          color: $font_main_color;
        }
      }
    }
  }

  // 最新音乐
  .latestSong {
    width: 100%;
    margin-top: 20px;

    .exclusiveBroadcast_title {

      span {
        margin-right: $marginRight6;
        font-family: $activeTextFont;
      }

      &:nth-child(1) {
        @extend .moduleTitle
      }
    }

    .latestSongList {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-top: 12px;

      .latestSongItem {
        display: flex;
        width: 31%;
        height: 50px;
        margin-left: 15px;
        margin-bottom: 15px;
        border-radius: 6px;

        &:nth-child(1) {
          margin-left: 0;
        }

        &:nth-child(4) {
          margin-left: 0;
        }

        &:nth-child(7) {
          margin-left: 0;
        }

        &:nth-child(10) {
          margin-left: 0;
        }

        .picture {
          position: relative;
          flex-basis: 50px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }

          .smallImg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 25px;
            height: 25px;
            background-color: $theme-white;
            border-radius: 50%;

            img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 2px;
              margin: auto;
              width: 80%;
              height: 80%;
            }
          }
        }

        .descWrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 4px 0 4px 6px;
          box-sizing: border-box;

          .newSongTitle {
            color: $font_main_color;
            font-family: $textFont;
            display: -webkit-box;
            /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 2;
            /* 2行，只有 webkit内核支持 */
            word-break: break-all;
            /* 纯英文换行 */
            overflow: hidden;
            font-size: $font-size-sm;
          }

          .newSongAuthor {
            display: flex;
            color: $font_second_color;
            font-size: $font-size-xs;
            //display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
            //-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
            //-webkit-line-clamp: 2; /* 2行，只有 webkit内核支持 */
            //word-break: break-all; /* 纯英文换行 */

            .moreLabel {
              display: flex;
              align-items: center;
              width: auto;
              height: 100%;

              button {
                border: none;
                outline: none;
                height: 12px;
                line-height: 12px;
                padding: 0 2px;
                border-width: 1px;
                border-style: solid;
                @include border_color('border_color');
                // border: 1px solid $theme-red;
                background-color: #fff;
                @include author_color('author_color');
                margin: 0 2px;
                font-family: $activeTextFont;
                font-size: $font-size-xs;
                border-radius: 3px;
                font-weight: bold;
              }

              .mv {
                cursor: pointer;
              }
            }
          }
        }

        &:hover {
          background-color: rgb(235, 235, 235);
        }
      }
    }
  }
}



// 轮播图穿透
// 设置圆角
:deep(.el-carousel__container > div) {
  border-radius: 15px;
}

// 设置轮播图圆点
:deep(.el-carousel__indicator > button) {
  width: 6px;
  height: 6px;
  border-radius: 25px;
}

// 设置选中圆点颜色
:deep(.is-active > button) {
  @include background_color('bk_color');
}

// 骨架屏
:deep(.el-skeleton) {
  margin-right: 15px !important;
  margin-bottom: 18px;
}

// 轮播图响应式设置
@media screen and (max-width: 1045px) {
  :deep(.el-carousel__container .is-active) {
    width: 500px;
    transform: translateX(130px) !important;
  }
}

// 歌单的描述信息
@media screen and (max-width: 1100px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .songListDesc {
    font-size: $font-size-xs;
  }
}

// 歌单图片响应式设置
@media screen and (min-width: 1100px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .personalityRecommon .recommenSongList .everydayRecommen .songItem .itemBkImg {
    height: 210px !important;
  }
}


// 独家放送
@media screen and (min-width: 1030px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1100px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 204px !important;
  }
}

@media screen and (min-width: 1370px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .personalityRecommon .exclusiveBroadcast .exclusiveBroadcastWrap {
    height: 210px !important;
  }
}</style>
